/**
 * @desc 角色修改组件
 */
import React, {Component} from "react";
import {withRouter} from "react-router-dom";
import {Form, Space, Button, Radio} from "antd";
import {phoneReg, passwordReg} from '@/utils/regexp'
import PropTypes from "prop-types";
import {connect} from "react-redux";
import {apiRoleUpdate, apiRoleDetails} from "@/request/system/role";
import TheAreaEditor from "../../../../components/TheArea/editor";

const Item = Form.Item;

class UserUpdate extends Component {
    state = {
        loading: false,
        sysRoleType: '0',
        addressData: {}
    }

    async componentDidMount() {
        if (this.props.id) {
            const res = await apiRoleDetails({roleId: this.props.id})
            if (res.code === 0 && res.data) {
                this.formRef.setFieldsValue(res.data)
                const {province, city, area, provinceName, cityName, areaName} = res.data
                this.setState({
                    sysRoleType: res.data.sysRoleType,
                    addressData: {province: province || 10001, city, area, provinceName, cityName, areaName}
                })
            }
        }
    }

    /**
     * @desc 修改提交事件
     * @params object {value} 表单验证对象
     * */
    onFinish = async value => {
        this.setState({loading: true})
        const {addressData} = this.state
        value.roleId = this.props.id
        value = {...value, ...addressData}
        delete value.address
        const keys = Object.keys(value)
        keys.forEach(v => {
            if (!value[v]) {
                delete value[v]
            }
        })
        apiRoleUpdate(value).then(res => {
            if (res.code === 0) {
                React.$message({
                    type: 'success',
                    content: '修改成功'
                })
                //关闭弹窗
                this.props.handleCancel()
                //刷新你列表
                this.props.getList();
            }
            this.setState({loading: false})
        }).catch(e => {
            this.setState({loading: false})
        })
    };

    setAreaData = address => {
        this.setState({
            addressData: address
        }, () => this.formRef.setFieldsValue({address: 0}))
    }

    radioChange = e => {
        this.setState({
            sysRoleType: e.target.value
        })
    }

    render() {
        const {handleCancel} = this.props;
        const {loading, sysRoleType, addressData} = this.state;
        return (
            <Form
                ref={(ref) => {
                    this.formRef = ref;
                }}
                labelCol={{span: 6}}
                onFinish={this.onFinish}
                wrapperCol={{span: 16}}
                initialValues={{status: 'Y'}}
            >
                <Item name="roleName" rules={[{required: true, message: "请输入角色名称"}]} label="角色名称">
                    <React.FormInput placeholder={'请输入角色名称'}/>
                </Item>
                {/* <Item label={'身份'} name={'sysRoleType'} rules={[{required: true}]}>
                    <Radio.Group onChange={this.radioChange}>
                        <Radio value={'0'}>
                            超级管理员
                        </Radio>
                        <Radio value={'1'}>
                            服务站管理员
                        </Radio>
                        <Radio value={'2'}>
                            商户
                        </Radio>
                    </Radio.Group>
                </Item>
                {sysRoleType > 0 && <Item label={'区域'} name={'address'} rules={[{required: true}]}>
                    <TheAreaEditor addressData={addressData} setAreaData={this.setAreaData}/>
                </Item>} */}
                <div className="p-text-align">
                    <Space size="large">
                        <Button key="back" onClick={handleCancel}>
                            取 消
                        </Button>
                        <Button loading={loading} type="primary" htmlType="primary">
                            确 定
                        </Button>
                    </Space>
                </div>
            </Form>
        );
    }
}

UserUpdate.propTypes = {
    dialogType: PropTypes.string,
    handleCancel: PropTypes.func
};
UserUpdate.defaultProps = {};
const mapStateToProps = state => {
    return {
        user: state.user
    };
};
const mapDispatchToProps = dispatch => {
    return {};
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(UserUpdate));
